<template>
    <!--企业能耗统计-->
    <div class="energySiderRight">
        <common-border-large width="100%" height="75%" text="企业能耗统计">
            <!--  月度企业能耗排名    -->
            <div class="content_1">
                <CustomEnergySiderRightBusinessEnergy></CustomEnergySiderRightBusinessEnergy>
            </div>
            <!--  月度企业能耗及环比增速-->
            <div class="content_2">
                <CustomEnergySiderRightChainGrowthRate></CustomEnergySiderRightChainGrowthRate>
            </div>
            <!--  月度企业能耗分类统计-->
            <div class="content_3">
                <CustomEnergySiderRightClassificationStatistics></CustomEnergySiderRightClassificationStatistics>
            </div>
        </common-border-large>
        <common-border-large width="100%" class="eco_friendly_electricity" text="环保用电">
            <CustomEnergySiderRightEcoFriendlyElectricity></CustomEnergySiderRightEcoFriendlyElectricity>
        </common-border-large>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.energySiderRight {
    height: 100%;

    .eco_friendly_electricity {
        margin-top: 10px;
        height: calc(25% - 10px);
    }

    .content_1 {
        height: 40%;
    }

    .content_2 {
        height: 33%;
    }

    .content_3 {
        height: 24%;
    }
}
</style>
